<template>
    <div class="recomends">
        <div class="recomend">
            <a href="https://wht.im">
                <div><img src="../../../assets/img/book.svg" alt=""></div>
                <div>读书</div>
            </a>
        </div>
        <div class="recomend">
            <a href="https://wht.im">
                <img src="../../../assets/img/catalog.svg" alt="">
                <div>学习</div>
            </a>
        </div>
        <div class="recomend">
            <a href="https://wht.im">
                <img src="../../../assets/img/popcorn.svg" alt="">
                <div>电影</div>
            </a>
        </div>
        <div class="recomend">
            <a href="https://wht.im">
                <img src="../../../assets/img/travel.svg" alt="">
                <div>旅游</div>
            </a>
        </div>
    </div>
</template>    

<script>
    import ge from './ge.jpg'
    export default {
        name: 'HomeRecomend',
        data() {
            return {
                recomends: {
                    name: '张三',
                    src: 'wht.im',
                    link: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
                }
            }
        },
        
    }
</script>

<style>
    .recomends{
        padding: 30px 0px;
        display: flex;
        justify-content:space-between;
        /* background-color: #333;
        width: 300px; */
    }
    .recomend{
        color: #333;
        flex: 1;
        text-align: center; 
        /* width: 87px; */
        /* background-color: #333; */
    }
    .recomend img{
        margin-bottom: 8px;
    }
    .recomend div {
        text-decoration:none; 
        color: #333;
    }
</style>